<template>
  <div class="video-container">
    <div class="video-list">
      <div v-for="video in videos" :key="video.id" class="video-item">
        <video :src="video.thumbnail" controls loop class="video-thumbnail"></video>
        <p class="video-title">{{ video.title }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import VideoList from './components/VideoList.vue';
import API from "@/components/API.vue";
import TTS from "@/components/TTS.vue";
import speech from "@/components/speech.vue";
import VideoPlayer from "@/components/VideoPlayer.vue";
import ImageUpload from "@/components/ImageUpload.vue";
export default {
  name: 'App',
  components: {
    VideoList,
  },
  data() {
    return {
      text: '',
      currentPage: 'API',
      videos: [
        {id: 1, title: '视频1', thumbnail: 'http://localhost:9090/lx2.mp4'},
        {
          id: 2,
          title: '视频2',
          thumbnail: 'http://localhost:9090/lx2.mp4'
        },
        {id: 3, title: '视频3', thumbnail: 'http://localhost:9090/lx2.mp4'},
        {
          id: 4,
          title: '视频4',
          thumbnail: 'http://localhost:9090/lx2.mp4'
        },
        {id: 5, title: '视频5', thumbnail: 'http://localhost:9090/lx2.mp4'},
        {
          id: 6,
          title: '视频6',
          thumbnail: 'http://localhost:9090/lx2.mp4'
        },// 添加更多视频对象
      ],
    }
  },
  methods: {
  }
}
</script>

<style>
.video-container {
  max-width: 1000px;
  margin: 0 auto;
}

.thumbnail img {
  width: 100%;
}

.content hr {
  border: none;
  border-top: 1px solid #000;
}


VideoPlayer {
  flex: 1;
}
.video-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
}

.video-item {
  flex: 0 0 calc(33.33% - 20px); /* 每行显示三个视频，左右间距为10px */
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.video-thumbnail {
  width: 100%;
  height: auto;
}

.video-title {
  padding: 10px;
  font-size: 14px;
  text-align: center;
}

.thumbnail img {
  width: 100%;
}

.content hr {
  border: none;
  border-top: 1px solid #000;
}

VideoPlayer {
  flex: 1;
}
</style>